<template>
  <div class="broken">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div class="broken_view" v-else>
      <div class="switch">
        <div class="checkTemper">
          <div
            v-for="item in LineList"
            :key="item"
            class="button"
            :class="number == item ? 'active' : null"
            @click="handlerTemper(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <div class="broken-title">中空出片</div>
        <div class="company-logo">
          <div class="company-name" @click="$router.back()">
            <div class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</div>
          </div>
        </div>
      </div>
      <div class="ty-line">
        <dv-decoration-8
          style="width: 30%; height: 100px"
          :color="['#00c2ff', '#00c2ff']"
        />
        <dv-decoration-10 style="width: 70%; height: 5px" />
        <div class="company-logo">
          <!-- <img :src="company_logo" alt="" @click="$router.back()" />
          <div class="company-name" @click="$router.back()">
            {{ company_name }}
          </div> -->
          <dv-decoration-1 style="width: 200px; height: 40px" />
        </div>
      </div>
      <div class="broken-box">
        <!-- <dv-border-box-7 style="width: 65%">
          <div class="broken-big-glass">
            <div
              class="broken-min-glass"
              v-if="glassList.length != 0"
              :style="{
                width: glassList[0].furInWidth * (1293 / 2000) + 'px',
                height: glassList[0].furInHeight * (877 / 2000) + 'px',
              }"
            >
              {{ glassList[0].furInWidth + "*" + glassList[0].furInHeight }}
              <br />
              <div class="rule">
                {{
                  glassList[0].furInWidth > glassList[0].furInHeight ? "W" : "H"
                }}
              </div>
            </div>
          </div></dv-border-box-7
        > -->
        <div class="broken_content">
          <!-- <div class="inner_box" style="width: 100%; height: 100%">
            <dv-scroll-board
              :config="config"
              style="width: 100%; height: 100%"
            />
          </div> -->
          <dv-border-box-7
            style="width: 24.2%; height: 48%"
            v-for="item in 8"
            :key="item"
          >
            <div class="broken-big-glass">
               <div class="No">·{{ item }}·</div>
              <div
                class="broken-min-glass"
                v-if="glassList[item - 1]"
                :style="{
                  width:
                    (glassList[item - 1].furInWidth * (449 / 2000) > 200
                      ? glassList[item - 1].furInWidth * (449 / 2000)
                      : 200) + 'px',
                  height:
                    (glassList[item - 1].furInHeight * (428 / 2000) > 200
                      ? glassList[item - 1].furInHeight * (428 / 2000)
                      : 200) + 'px',
                }"
              >
                {{
                  glassList[item - 1].furInWidth +
                  "*" +
                  glassList[item - 1].furInHeight
                }}
                <br />
               
                <div class="rule">
                  {{
                    glassList[item - 1].furInWidth >
                    glassList[item - 1].furInHeight
                      ? "W"
                      : "H"
                  }}
                </div>
                <div class="cardCode">
                  {{ glassList[item - 1].optGlass.cardCode }}
                </div>
                <div class="tag">
                  {{ glassList[item - 1].optGlass.tag }}
                </div>
              </div>
            </div>
          </dv-border-box-7>
        </div>
      </div>
      <div class="bottom-tip">
        W : 横向为长边 H : 纵向为长边 A/B/C: 片标记<br />
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/formateTime.js";
import { getZkOnLineGlass } from "@/api/assembly/behindCage";
export default {
  data() {
    return {
      radio: 1,
      glassList: [],
      timer: null,
      timing: null,
      LineList: [1, 2, 3, 4],
      isShow: false,
      cameraStatus: 0,
      number: 1,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      loading: true,
      config: {},
    };
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    handlerTemper(e) {
      this.number = e;
      this.getZKLineData();
    },

    getZKLineData() {
      getZkOnLineGlass().then((res) => {
        this.glassList = res.data.hasOwnProperty(this.number)
          ? res.data[this.number]
          : [];
      });
    },
    deepConfig() {
      this.config = {
        header: ["流程卡号", "长*宽", "厚度", "片类型"],
        data: this.configData,
        index: true,
        columnWidth: [50],
        align: ["center"],
        rowNum: 18,
        carousel: "page",
      };
    },
  },
  computed: {
    configData() {
      let arr = [];
      this.glassList.forEach((item) => {
        arr.push([
          item.optGlass.cardCode,
          item.furInWidth + "*" + item.furInHeight,
          item.thick + "mm",
          item.optGlass.tag,
        ]);
      });
      return arr;
    },
  },
  created() {
    this.timeFn();
    this.deepConfig();
    this.cancelLoading();
    this.getZKLineData();
    this.timer = setInterval(async () => {
      this.getZKLineData();
    }, 10000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  filters: {
    filterStatus(e) {
      let arr = ["空闲", "成功", "失败"];
      return arr[e];
    },
  },
};
</script>

<style  lang="scss" scoped>
.broken {
  width: 100%;
  height: 100%;
  display: flex;
  background-image: linear-gradient(to bottom, #10152b, #10152b);
  color: #fff;

  .broken_view {
    position: relative;
    padding: 10px 10px 0 25px;
    height: 100%;
    width: 100%;
    // border-right: 1px dashed #e6e6e6;
    display: flex;
    flex-direction: column;
    .switch {
      display: flex;
      align-items: center;
      .checkTemper {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 30px;
        margin-left: 40px;
        z-index: 2;
        .button {
          width: 60px;
          height: 50px;
          transform: skewX(30deg);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #17b9fc;
          border: 1px solid #17b9fc;
        }

        .button > div {
          transform: skewX(-30deg);
          font-size: 24px;
          font-weight: bold;
        }
        .active {
          background-image: linear-gradient(to top, #1890ff 0%, #16e2ff 100%);
          color: #fff;
        }
      }
      .broken-title {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 20px;
        color: transparent;
        -webkit-background-clip: text;
        background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
        img {
          height: 55px;
          width: 70px;
          transform: translateY(5px);
        }
      }
      .company-logo {
        min-width: 20%;
        min-height: 15%;
        padding: 2px 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: auto;
        img {
          width: 50px;
          height: 50px;
          margin-right: 20px;
          margin-left: 50px;
        }
        .company-name {
          font-size: 24px;
          font-weight: bold;
          display: flex;
          align-items: flex-end;
          letter-spacing: 2px;
        }
      }
      .name {
        padding-left: 5px;
        font-weight: bold;
        font-size: 20px;
        margin-right: 20px;
        transform: translateY(-3px);
        cursor: pointer;
      }
      .back {
        // border-right: 1px solid #e6e6e6;
        width: 55px;
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
      }
      .back:hover {
        text-decoration: underline;
      }
    }
    .ty-line {
      position: relative;
      display: flex;
      .dv-decoration-8 {
        transform: translateY(-47.5%);
      }
      .company-logo {
        position: absolute;
        right: 0px;
        bottom: 48%;
        width: 29.4%;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
        .company-name {
          font-size: 24px;
          font-weight: bold;
          display: flex;
          align-items: flex-end;
          letter-spacing: 5px;
        }
        .dv-decoration-1 {
          margin-left: auto;
        }
      }
    }
    .broken-box {
      height: calc(100vh - 160px);
      display: flex;
      padding: 0px 0px 10px 0px;
      transform: translateY(-40px);
      .broken-big-glass {
        position: relative;
        height: 100%;
        width: 100%;
        // background-color: #deb888;
        display: flex;
        align-items: center;
        justify-content: center;
        .camera-status {
          width: 100px;
          height: 40px;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          font-weight: bold;
          right: 0;
          top: 0;
          .light {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            margin-right: 10px;
            animation: pulsate 5s ease-out;
          }
         
        }
         .No {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            font-size: 24px;
            color: #53555e;
          }
        .broken-min-glass {
          display: flex;
          position: relative;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          font-weight: bold;
          background-color: #17b9fc;
          border: 1px solid #000002;
          .rule {
            position: absolute;
            left: 5px;
            top: 0;
          }
          .cardCode {
            position: absolute;
            left: 50%;
            bottom: 0;
            font-size: 16px;
            transform: translateX(-50%);
          }
          .tag {
            position: absolute;
            right: 5px;
            top: 0;
          }
          
        }
      }
      .broken_content {
        width: 30%;
        // margin-left: 20px;
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-around;
        // flex-direction: column;
        padding: 0 10px;
        .inner_box {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .dv-border-box-10 {
          flex: 1;
        }

        .progress {
          padding: 5px 10px;
          flex: 1;
          display: flex;
          flex-direction: column;
          .progress-name {
            height: 40%;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            transform: translateY(20px);
          }
          .progress-circle {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .white-text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          font-weight: bold;
          letter-spacing: 5px;
          color: #dee1e6;
        }
        .glass_info {
          height: 12%;
          font-size: 24px;
          font-weight: bold;
          display: flex;
          align-items: center;
          flex-direction: column;
          .text {
            transform: translateY(10px);
            letter-spacing: 5px;
            color: transparent;
            -webkit-background-clip: text;
            background-image: linear-gradient(
              to right,
              #007aff,
              #00dfff,
              #007aff
            );
          }
        }
        .line-list {
          padding: 0 20px 0 10px;
          flex: 1;
          display: flex;
          flex-direction: column;
          .line-item {
            font-size: 28px;
            font-weight: bold;
            padding-left: 10px;
            margin-bottom: 20px;
            .item {
              display: flex;
              span {
                margin-left: auto;
                font-size: 26px;
                display: flex;
                align-items: center;
              }
            }
          }
        }
        .tips {
          flex: 1;
          display: flex;
          flex-direction: column;
          border-bottom: 1px solid #e6e6e6;
          .top_sub {
            height: 40px;
            font-size: 24px;
            padding: 10px;
          }
          .descript {
            flex: 1;
            padding: 10px;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
          }
        }
      }
    }
    .bottom-tip {
      position: absolute;
      display: flex;
      align-items: center;
      width: 90%;
      left: 25px;
      bottom: 5px;
      height: 30px;
    }
  }
}
::v-deep .el-progress__text {
  display: flex;
  flex-direction: column;
}
</style>
